<!--菜单1:
首页-->
<template>
    <div class="myHome">
        <el-tabs v-model="activeName" @tab-click="onTabClick" type="border-card">
            <el-tab-pane label="用电概况" name="UseEle" class="el-tab-pane"></el-tab-pane>
            <el-tab-pane label="用水概况" name="UseWater" class="el-tab-pane"></el-tab-pane>
            <router-view/>
        </el-tabs>
    </div>
</template>

<script>

import UseEle from '../../components/menu/UseEle'
import UseWater from '../../components/menu/UseWater'

export default {
    name: "MyHome",
    data() {
        return {
            activeName: 'UseEle',
        }
    },
    components: {
        UseEle,
        UseWater
    },
    methods: {
        onTabClick(e) {
            this.$router.push({name: e.name});
        }
    }
}
</script>

<style>
.myHome {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

.el-tabs {
    height: 100%;
    box-sizing: border-box;
}

.el-tabs__header {
    background-color: #28A1D9 !important;
}

.el-tabs__item {
    color: black !important;
    font-weight: bold;
}

.el-tab-pane {
    width: 100%;
    height: 100%;
}
</style>
